<template>
  <el-card shadow="always" style="background:#111010; border-radius: 35px 35px 0 0; height: 10vh; margin: 10vw 15vw 0 15vw;">
    <h2 style="line-height: 1vh;text-align:center; color:white;">高级搜索</h2>
  </el-card>
  <el-card shadow="always" style="border-radius: 0 0 35px 35px; margin: 0 15vw 1vw 15vw; opacity: 0.95">
    <div style="margin-right:30px;" v-for="(cond, index) in searchConds" :key="index">
      <!-- <h2 style="float:left;">AEP智搜</h2> -->
      <!-- 删除搜索项 -->
      <el-tooltip
          v-if="cond.oprater"
          effect="dark"
          content="删除行"
          style="float:left; width:2vw;"
      >
        <i class="el-icon-remove-outline" style="text-align:center;" @click="deleteRow(cond)"></i>
      </el-tooltip>
      <!-- 与或非运算 -->
      <el-select v-if="cond.oprater" v-model="cond.oprater"  style="float:left; height:7vh; width:93px;" size="200">
        <el-option
            v-for="(oprater, index) in opraterOptions"
            :key="index"
            :label="oprater"
            :value="oprater"
        >
        </el-option>
      </el-select>
      <!-- 检索条件 -->
      <el-select v-if="cond.oprater" v-model="cond.option"  style="float:left; height:7vh; width:11vw; margin-left:10px;" size="200">
        <el-option
            v-for="(option, index) in searchOptions"
            :key="index"
            :label="option"
            :value="option"
        >
        </el-option>
      </el-select>
      <el-select v-else v-model="cond.option"  style="float:left; height:7vh; width:17vw; margin-left:2vw;" size="200">
        <el-option
            v-for="(option, index) in searchOptions"
            :key="index"
            :label="option"
            :value="option"
        >
        </el-option>
      </el-select>
      <!-- 检索输入搜索框 -->
      <el-input
          v-model="cond.content"
          v-if="cond.option=='主题'"
          placeholder="示例：模拟退火"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
      <el-input
          v-model="cond.content"
          v-else-if="cond.option=='标题'"
          placeholder="示例：一种自适应模拟退火粒子群优化算法"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
      <el-input
          v-model="cond.content"
          v-else-if="cond.option=='作者'"
          placeholder="示例：闫群民"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
      <el-input
          v-model="cond.content"
          v-else-if="cond.option=='出版物/来源出版物名称'"
          placeholder="示例：西北工业大学学报"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
      <el-input
          v-model="cond.content"
          v-else-if="cond.option=='出版年'"
          placeholder="示例：2021"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
      <el-input
          v-model="cond.content"
          v-else-if="cond.option=='DOI'"
          placeholder="示例：10.19665/j.issn1001-2400.2021.04.016"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
      <el-input
          v-model="cond.content"
          v-else-if="cond.option=='摘要'"
          placeholder="示例：为了提高粒子群算法的寻优速度和精度"
          style="float:left; height:8vh; width: 90%; margin-left:10px;"
          input-style="height: 7vh;border-radius: 5px;"
          clearable
      />
    </div>
    <!-- 日期范围 -->
    <div>
      <el-tooltip
          v-if="dateRange.option"
          effect="dark"
          content="删除日期范围"
          style="float:left; width:2vw;"
      >
        <i class="el-icon-remove-outline" style="text-align:center;" @click="deleteDateRange"></i>
      </el-tooltip>
      <el-select v-if="dateRange.option && dateRange.option!='自定义年份范围'" v-model="dateRange.option"  style="float:left; height:7vh; width:17vw; margin:10px 45vw 1vw 0;" size="200">
        <el-option
            v-for="(option, index) in dateRangeOptions"
            :key="index"
            :label="option"
            :value="option"
        >
        </el-option>
      </el-select>
      <el-select v-else-if="dateRange.option=='自定义年份范围'" v-model="dateRange.option"  style="float:left; height:7vh; width:17vw; margin:10px 0 1vw 0;" size="200">
        <el-option
            v-for="(option, index) in dateRangeOptions"
            :key="index"
            :label="option"
            :value="option"
        >
        </el-option>
      </el-select>
      <div v-if="dateRange.option=='自定义年份范围'">
        <el-input
            v-model="dateRange.beginYear"
            placeholder="YYYY-MM-DD"
            style="float:left; height:8vh; width: 21vw; margin:10px 0 1vw 15px;"
            input-style="height: 7vh;border-radius: 5px;"
            clearable
        />
        <span style="line-height: 7vh;float:left; height:7vh; text-align:center; margin:10px 0 1vw 24px;">至</span>
        <el-input
            v-model="dateRange.endYear"
            placeholder="YYYY-MM-DD"
            style="float:left; height:8vh; width: 21vw; margin:10px 0 1vw 24px;"
            input-style="height: 7vh;border-radius: 5px;"
            clearable
        />
      </div>
    </div>
    <!-- 添加行 -->
    <el-button round style="float:left; margin:1vw 0 3vh 2vw;" @click="addRow">+添加行</el-button>
    <!-- 添加日期范围 -->
    <el-button round v-if="!dateRange.option" style="float:left; margin:1vw 0 3vh 2vw;" @click="addDateRange">+添加日期范围</el-button>
    <!-- 检索 -->
    <el-button type="primary" style="float:right;margin:30px; 20px 30px 0;">检索</el-button>
  </el-card>
</template>

<script>
import { ref } from '@vue/reactivity';
import NavigatorMenu from "../components/NavigatorMenu";

export default {
  name: "AdvSearch",
  components: {

  },
  data() {
    return {
      searchOptions: ['主题','标题','作者','出版物/来源出版物名称','出版年','DOI','摘要'],
      opraterOptions: ['AND','OR','NOT'],
      dateRangeOptions: ['所有年份(1950-2021)','最近五年','本周','最近2周','最近4周','本年迄今','自定义年份范围'],
      searchConds: [{
        option: '主题',
        content: '',
        oprater: '',
      }],
      dateRange: {
        option: '',
        beginYear: '',
        endYear: '',
      },
      coverAdvance: require('../assets/images/macro1.jpg'),
    }
  },
  methods :{
    deleteRow(item) {
      const index = this.searchConds.indexOf(item)
      if (index !== -1) {
        this.searchConds.splice(index, 1)
      }
    },
    deleteDateRange() {
      this.dateRange.option = '';
      this.dateRange.beginYear = '';
      this.dateRange.endYear = '';
    },
    addRow() {
      this.searchConds.push({
        option: '主题',
        content: '',
        oprater: 'AND',
      })
    },
    addDateRange() {
      this.dateRange.option = '所有年份(1950-2021)';
      this.dateRange.beginYear = '';
      this.dateRange.endYear = '';
    }
  }
}
</script>

<style scoped>

input,textarea{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
</style>
